import "./array";
import observe from "./observe";
// 基于对对象的数据劫持，数组的劫持需要解决这些问题
// 1.对数组的7个变异方法的重写， 目的是在数据调用这些方法的时候去劫持
// 2.对数组的新增元素的数据劫持，对length属性的数据劫持
//（对于第二点，vue2对于用索引去更新数组的元素和直接更改length值是不会去劫持的）这个问题还是无法被解决
// （1）通过索引更新数据，使用Vue.set 或 $set
//        它会：
//          判断目标是否是数组且索引是否超出当前长度。
//          如果是数组索引，则调用 splice 方法替代直接赋值，从而触发响应式更新。
//          如果是对象属性，则通过 defineReactive 添加响应式属性并触发更新。 
//  (2) Vue 2 对数组的 length 属性的直接修改没有做响应式处理，不会触发视图更新

// 验证：
// src/images/5-数组更新限制和方法重写.png

// 1.重写数组的7个变异方法
// 思路：src/images/4-数组方法的继承逻辑.png

let obj = {
  name: [1, 2, 3, 4],
};
observe(obj);

// 这三个方法新增的元素添加数据劫持，也可以继续添加对页面的更新操作
obj.name.push(5); // 重写的方法执行 push
obj.name.unshift(1); // 重写的方法执行 unshift
obj.name.splice(1, 2, 21, 22); // 重写的方法执行 splice

// 这三个方法删除的元素, 可以添加对页面的更新操作
obj.name.pop(); // 重写的方法执行 pop. 通知页面更新
obj.name.shift(); // 重写的方法执行 shift. 通知页面更新
obj.name.splice(1, 2); // 重写的方法执行 splice 通知页面更新

// 这两个方法改变值，可以添加对页面的更新操作
obj.name.reverse(); // 重写的方法执行 reverse. 通知页面更新
obj.name.sort((a, b) => a - b); // 重写的方法执行 sort. 通知页面更新

console.log(obj.name);
